<template>
    <div class="bgcolor">
        <el-row :gutter="20" class="mgb20">
            <el-col :span="6">
                <el-card>
                    <div class="grid-content">
                        <div class="grid-cont-content">
                            <div class="grid-num">{{consumerCount}}</div>
                            <div class="hcqFont hcqStyle1">用户总数</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div class="grid-content">
                        <div class="grid-cont-content">
                            <div class="grid-num">{{songCount}}</div>
                            <div class="hcqFont hcqStyle1">歌曲总数</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div class="grid-content">
                        <div class="grid-cont-content">
                            <div class="grid-num">{{singerCount}}</div>
                            <div class="hcqFont hcqStyle1">歌手总数</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div class="grid-content">
                        <div class="grid-cont-content">
                            <div class="grid-num">{{songListCount}}</div>
                            <div class="hcqFont hcqStyle1">歌单总数</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        
        <el-row :gutter="20" class="mgb20">
            <el-col :span="12">
                <h3 class="mgb20">用户性别比例</h3>
                <div style="background-color: white">   
                    <ve-pie :data="consumerSex" :theme="options"></ve-pie>
                </div>
            </el-col>
            <el-col :span="12">
                <h3 class="mgb20">歌单类型分布</h3>
                <div style="background-color: white">   
                    <ve-histogram :data="songStyle"></ve-histogram>
                </div>
            </el-col>
            
            <el-col :span="12">
                <h3 class="mgb20">歌手性别比例</h3>
                <div style="background-color: white">   
                    <ve-pie :data="singerSex"></ve-pie>
                </div>
            </el-col>
            <el-col :span="12">
                <h3 class="mgb20">歌手国际分布</h3>
                <div style="background-color: white">   
                    <ve-histogram :data="country"></ve-histogram>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import {getAllConsumer,allSong,getAllSinger,getAllSongList} from '../api/index'
    export default{
        data(){
            return{
                consumerCount: 0,
                songCount: 0,
                singerCount: 0,
                songListCount: 0,
                consumer:[],
                consumerSex:{
                    columns:['性别','总数'],
                    rows:[
                        {'性别':'男','总数':0},
                        {'性别':'女','总数':0}
                    ]
                },
                options:{
                    color:['#87CEEB','#FFC0CB']
                },
                //按歌单风格分类
                songStyle:{   
                    columns:['风格','总数'],
                    rows:[
                        {'风格':'华语','总数':0},
                        {'风格':'粤语','总数':0},
                        {'风格':'欧美','总数':0},
                        {'风格':'日韩','总数':0},
                        {'风格':'BGM','总数':0},
                        {'风格':'轻音乐','总数':0},
                        {'风格':'乐器','总数':0}
                    ]
                },
                singerSex:{
                    columns:['性别','总数'],
                    rows:[
                        {'性别':'女','总数':0},
                        {'性别':'男','总数':0},
                        {'性别':'组合','总数':0},
                        {'性别':'不明','总数':0}
                    ]
                },
                country:{
                    columns:['国籍','总数'],
                    rows:[
                        {'国籍':'中国','总数':0},
                        {'国籍':'韩国','总数':0},
                        {'国籍':'日本','总数':0},
                        {'国籍':'美国','总数':0},
                        {'国籍':'新加坡','总数':0},
                        {'国籍':'意大利','总数':0},
                        {'国籍':'马来西亚','总数':0},
                        {'国籍':'西班牙','总数':0},
                    ]
                }
            }
        },
        created(){

        },
        mounted(){
            this.getConsumer();
            this.getAllSong();
            this.getAllSinger();
            this.getSongList();
        },
        methods:{
            getConsumer(){
                getAllConsumer().then(res =>{
                    this.consumer = res;
                    this.consumerCount = res.length;
                    this.consumerSex.rows[0]['总数'] = this.setSex(1,this.consumer);
                    this.consumerSex.rows[1]['总数'] = this.setSex(0,this.consumer);
                    this.setSex(1,this.consumer);
                })
            },
            // 根据性别获取用户数
            setSex(sex,val){
                let count=0;
                for(let item of val){
                    if(sex == item.sex){
                        count++;
                    }
                }
                return count;
            },
            getAllSong(){
                allSong().then(res =>{
                    this.songCount = res.length;
                })
            },
            getAllSinger(){
                getAllSinger().then(res =>{
                    this.singerCount = res.length;
                    this.singerSex.rows[0]['总数'] = this.setSex(0,res);
                    this.singerSex.rows[1]['总数'] = this.setSex(1,res);
                    this.singerSex.rows[2]['总数'] = this.setSex(2,res);
                    this.singerSex.rows[3]['总数'] = this.setSex(3,res);

                    for(let item of res){
                        this.getByCountry(item.location);
                    }
                })

            },

            getSongList(){
                getAllSongList().then(res =>{
                    this.songListCount = res.length;
                    for(let item of res){
                        this.getByStyle(item.style);
                    }
                })
            },
            getByCountry(location){
                for(let item of this.country.rows){
                    if(location.includes(item['国籍'])){
                        item['总数']++;
                    }
                }
            },
           //根据歌单获取风格数量
            getByStyle(style){
                for(let item of this.songStyle.rows){
                    if(style.includes(item['风格'])){
                        item['总数']++;
                    }
                }
            }
        }
    }

</script>

<style scoped>

.grid-content{
    display: flex;
    align-items: center;
    height: 50px;
}

.grid-cont-content{
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: darkgray;
}
.gird-num{
    font-size: 30px;
    font-weight: bold;
    
}
.bgcolor{
    background-color:#d5e7de;
    padding-top: 10px;
}
.hcqFont{position:relative;font-size:1em;font-weight:normal;margin:0 auto}
.hcqStyle1{color: #000000}
</style>